<template>
    <div class="box">
<!--        问题总结 教室评语-->
        <el-row :gutter="20">
            <el-col :span="12"><div class="sums">
                <div>问题总结</div>
                <p>问题总结问题总结问题总结问题总结问题总结问题总结问题总结问题总结问题总结问题总结问题总结问题总结问题总结问题总结问题总结 </p>
            </div></el-col>
            <el-col :span="12"><div class="remark">
                <div class="danger">老师评语</div>
                <p>问题总结问题总结问题总结问题总结问题总结问题总结问题总结问题总结问题总结问题总结问题总结问题总结问题总结问题总结问题总结 </p>
            </div></el-col>
        </el-row>

        <el-table
                v-loading="loading"
                :data="tableData"
                :header-cell-style="{textAlign:'center',fontSize: '16px',fontWeight:500,color:'#000'}"
                :row-style="{marginTop:'16px',borderSpacing:'20px'}"
                :cell-style="{textAlign:'center',color:'#000'}"
                style="width: 100%;
                     border-radius: 20pxground: #F2F4FF;
                    border:1px solid #EFEFEF">
            <el-table-column
                    fixed
                    prop="questionType"
                    label="题号"
                    width="140">
            </el-table-column>
            <el-table-column
                    fixed
                    prop="questionName"
                    label="题目名称"
                    width="350">
            </el-table-column>
            <el-table-column
                    prop="questionType"
                    label="题型"
                    :formatter="typeFormat"
                    width="140">
            </el-table-column>
            <el-table-column
                    prop="type"
                    label="类型"
                    :formatter="categoryFormat"
                    width="140">
            </el-table-column>
            <el-table-column
                    prop="level"
                    label="难度"
                    :formatter="levelFormat"
                    width="140">
            </el-table-column>
            <el-table-column
                    prop="status"
                    label="结果"
                    :formatter="statusFormat"
                    width="140">
            </el-table-column>
            <el-table-column
                    fixed="right"
                    label="操作"
                    prop="status"
                    width="140">
                <template slot-scope="scope">
<!--                    <el-button @click="changeStatus(scope.row)" type="text" size="small">{{scope.row.status===0?'未完成':'已完成'}}</el-button>-->
                    <!--                            <el-button type="text" size="small" @click="getDetail(scope.$index)">查看</el-button>-->
                    <el-button type="text" size="small" @click="goDetail(scope.row)">查看</el-button>
                </template>
            </el-table-column>
        </el-table>
        <!--翻页-->
        <div class="changePage">
            <el-pagination
                    background
                    prev-text="上一页"
                    next-text="下一页"
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    current-page.sync="1"
                    :page-size="10"
                    layout="prev, pager, next, jumper"
                    :total="1000">
            </el-pagination>
        </div>

        <el-dialog
                title=""
                :visible.sync="dialogVisible"
                width="45%"
                :before-close="handleClose">
           <section>
               <h3>作业题目</h3>
               <p>题名题名题名题名题名题名题名题名题名题名题名题名题名题名题名题名题名题名题名题名题名题名题名题名题名题名题名题名</p>
               <div class="text-right">结果：<span class="blue">正确</span></div>
           </section>
            <section >
                <h3>答案信息</h3>
                <p>答案信息答案信息答案信息答案信息答案信息答案信息答案信息答案信息答案信息答案信息答案信息答案信息答案信息答案信息答案信息答案信息</p>
            </section>
            <section>
                <h3>正确答案</h3>
                <p>答案信息答案信息答案信息答案信息答案信息答案信息答案信息答案信息信息答案信息答案信息答案信息答案信息答案信息答案信息答案信息答案信息</p>
            </section>
            <div class="text-left"> <el-button type="text" >下载附件</el-button></div>
        </el-dialog>

    </div>
</template>

<script>
    export default {
        name: "testSubmitted",
        data(){
            return{
                dialogVisible:false
            }
        },
        props:{
            tableData:{
                type:[Object,Array],
                default(){
                    return[
                        {
                    answerInformation: "<p>抽象：抽象是将一类对象的共同特征总结出来构造类的过程，包括数据抽象和行为抽象两方面。抽象只关注对象有哪些属性和行为，并不关注这些行为的细节是什么。</p>",
                    answerUrls: "class/datas/b509b56f2d1e42cf968c5ab8ef542a9f-1.xlsx",
                    classId: "1494207301811310592",
                    classOutlineId: "1494207301819699253",
                    createBy: "admin",
                    createTime: "2022-02-25T14:21:41.000+08:00",
                    delFlag: 0,
                    id: "1497094470179622925",
                    isPublish: 1,
                    level: 0,
                    name: null,
                    outlineId: null,
                    publishType: 0,
                    questionId: null,
                    questionInformation: "<p>抽象：抽象是将一类对象的共同特征总结出来构造类的过程，包括数据抽象和行为抽象两方面。抽象只关注对象有哪些属性和行为，并不关注这些行为的细节是什么。</p>",
                    questionName: "面向对象的特征主要有以下几个方面",
                    questionType: 0,
                    questionUrls: "class/datas/4cb8cea63b2b4c149e30213f4dabe9d6-new1.txt",
                    sort: null,
                    status: 0,
                    studentId: null,
                    topId: "1494207301819699201",
                    type: 1,
                    updateBy: "admin",
                    updateTime: "2022-02-25T14:21:41.000+08:00",
                    },
                        {
                    answerInformation: "<p>抽象：抽象是将一类对象的共同特征总结出来构造类的过程，包括数据抽象和行为抽象两方面。抽象只关注对象有哪些属性和行为，并不关注这些行为的细节是什么。</p>",
                    answerUrls: "class/datas/b509b56f2d1e42cf968c5ab8ef542a9f-1.xlsx",
                    classId: "1494207301811310592",
                    classOutlineId: "1494207301819699253",
                    createBy: "admin",
                    createTime: "2022-02-25T14:21:41.000+08:00",
                    delFlag: 0,
                    id: "1497094470179622925",
                    isPublish: 1,
                    level: 0,
                    name: null,
                    outlineId: null,
                    publishType: 0,
                    questionId: null,
                    questionInformation: "<p>抽象：抽象是将一类对象的共同特征总结出来构造类的过程，包括数据抽象和行为抽象两方面。抽象只关注对象有哪些属性和行为，并不关注这些行为的细节是什么。</p>",
                    questionName: "面向对象的特征主要有以下几个方面",
                    questionType: 0,
                    questionUrls: "class/datas/4cb8cea63b2b4c149e30213f4dabe9d6-new1.txt",
                    sort: null,
                    status: 0,
                    studentId: null,
                    topId: "1494207301819699201",
                    type: 1,
                    updateBy: "admin",
                    updateTime: "2022-02-25T14:21:41.000+08:00",
                    },
                        {
                    answerInformation: "<p>抽象：抽象是将一类对象的共同特征总结出来构造类的过程，包括数据抽象和行为抽象两方面。抽象只关注对象有哪些属性和行为，并不关注这些行为的细节是什么。</p>",
                    answerUrls: "class/datas/b509b56f2d1e42cf968c5ab8ef542a9f-1.xlsx",
                    classId: "1494207301811310592",
                    classOutlineId: "1494207301819699253",
                    createBy: "admin",
                    createTime: "2022-02-25T14:21:41.000+08:00",
                    delFlag: 0,
                    id: "1497094470179622925",
                    isPublish: 1,
                    level: 0,
                    name: null,
                    outlineId: null,
                    publishType: 0,
                    questionId: null,
                    questionInformation: "<p>抽象：抽象是将一类对象的共同特征总结出来构造类的过程，包括数据抽象和行为抽象两方面。抽象只关注对象有哪些属性和行为，并不关注这些行为的细节是什么。</p>",
                    questionName: "面向对象的特征主要有以下几个方面",
                    questionType: 0,
                    questionUrls: "class/datas/4cb8cea63b2b4c149e30213f4dabe9d6-new1.txt",
                    sort: null,
                    status: 0,
                    studentId: null,
                    topId: "1494207301819699201",
                    type: 1,
                    updateBy: "admin",
                    updateTime: "2022-02-25T14:21:41.000+08:00",
                    },
                    ]
                }
            }
        },
        methods:{
            handleSizeChange(val) {
                console.log(`每页 ${val} 条`);
            },
            handleCurrentChange(val) {
                console.log(`当前页: ${val}`);
            },
            goDetail(data){
            //    弹框
                console.log(data)
                this.dialogVisible= true
            }
        }
    }
</script>

<style scoped lang="less">
    /deep/ .el-pagination.is-background .el-pager li{
        background: white;
    }
    .sums,.remark{
        background: white;
        margin: 20px 0;
        padding: 20px;

        .danger{
            color: rgba(255, 47, 0, 1);
        }
        div{
            color: #66b1ff;
            font-size: 18px;
            margin-bottom: 20px;
        }
        p{
            text-align: left;
        }
    }

    .box /deep/ .el-dialog{
        min-height: 200px;
    }
    /deep/ .el-dialog__header{
        padding: 0;
    }
    .text-left{
        text-align: left;
    }
    section{
        margin-bottom: 20px;
        h3{
            font-weight: 500;
            font-size: 18px;
            text-align: left;
        }
        p{
            margin: 10px 0;
            text-align: left;
        }
    }
    .blue{
        color: #66b1ff;
    }
    .text-right{
        text-align: right;
    }
    .changePage{
        text-align: right;
    }
    /deep/ .el-table__body{
        border-collapse: separate;
        border-spacing:0 10px;
    }
    .box{
        width: 1200px;
        margin: auto;
    }
</style>
